<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                template="/templates/mantenimiento.xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:r="http://richfaces.org">
    <ui:define name="title">
        Administración de Dato Global
    </ui:define>    
    <ui:define name="datos">
        <center>
            <h:panelGrid id="panelDatos">
                <h:form id="formDatos">
                    <r:panel styleClass="fondoPanel curved" >
                        <h:panelGrid columns="4">

                            <h:graphicImage library="images/ajax" name="bullet.gif" styleClass="pic" />
                            <h:outputText value="Sistema:" />
                            <h:selectOneMenu  label="Sistema" id="sistema"  converter="JsfConverterSistema" required="true" value="#{jsfDatoGlobal.object.admSistema}" >
                                <f:selectItem itemLabel="Seleccione..."/>    
                                <f:selectItems value="#{jsfSistema.selectedItem}" var="item"/>    
                                <f:ajax event="change" execute="sistema" render="panelLista" listener="#{jsfDatoGlobal.cargarLista()}"/>

                            </h:selectOneMenu>
                            <r:message for="sistema"/>

                            <h:graphicImage library="images/ajax" name="bullet.gif" />
                            <h:outputLabel for="clave" value="Clave:" />
                            <h:inputText id="clave" label="Clave"  size="50" maxlength="30" required="true" value="#{jsfDatoGlobal.object.clave}"  >
                                <f:validateLength minimum="3" />
                            </h:inputText>
                            <r:message for="clave" />

                            <h:graphicImage library="images/ajax" name="bullet.gif" />
                            <h:outputLabel for="valor" value="Valor:" />
                            <h:inputText id="valor" label="Valor"  size="50" maxlength="500" required="true" value="#{jsfDatoGlobal.object.valor}"  >
                                <f:validateLength minimum="3" />
                            </h:inputText>
                            <r:message for="valor" />

                            <f:verbatim/>
                            <h:outputLabel for="descripcion" value="Descripción:" />
                            <h:inputTextarea id="descripcion" label="Descripción" rows="3" cols="75" value="#{jsfDatoGlobal.object.descripcion}">
                                <f:validateLength maximum="500" />
                            </h:inputTextarea>
                            <r:message for="descripcion" />

                            <f:verbatim/>
                            <h:outputLabel for="estado" value="Activo:" />
                            <h:selectBooleanCheckbox id="estado" value="#{jsfDatoGlobal.estado}"/>
                            <r:message for="estado" />

                        </h:panelGrid>
                        <center>
                            <h:panelGrid >
                                <h:panelGroup id="panelBotones">
                                    <h:commandButton id="btGrabar" value="Grabar" action="#{jsfDatoGlobal.grabarAction}"  title="Grabar registro">
                                        <f:ajax execute="@form" event="action" render="commonStatus :panelDatos "/>
                                    </h:commandButton>
                                    <h:commandButton id="btNuevo" value="Nuevo" action="#{jsfDatoGlobal.nuevoDatoGlobal}"  title="Limpiar o crear nuevo registro">
                                        <f:ajax event="action" render="@form"/>
                                    </h:commandButton>
                                    <r:status id="commonStatus">
                                        <f:facet name="start">
                                            <h:graphicImage library="images/ajax" name="status2.gif"/>
                                        </f:facet>
                                    </r:status>
                                </h:panelGroup>
                            </h:panelGrid>
                        </center>
                        <r:message for="formDatos">
                            <f:facet name="errorMarker">
                                <h:graphicImage library="images/ajax" name="warning.gif"/>
                            </f:facet>
                            <f:facet name="infoMarker">
                                <h:graphicImage library="images/ajax" name="passed.gif"/>
                            </f:facet>
                        </r:message>

                        <br />
                        <h:panelGroup >
                            <h:graphicImage library="images/ajax" name="bullet.gif" />
                            <h:outputText value="Campo obligatorio" styleClass="campo-obligatorio"/>
                        </h:panelGroup>
                        <div class="separador" />
                        <p /> 
                        <h:panelGrid id="panelLista">
                            <r:dataTable id="listaSimple" value="#{jsfDatoGlobal.lista}" var="item"  rows="20" rendered="#{jsfDatoGlobal.lista.size()>0}">
                                <f:facet name="header">
                                    <h:outputText value="Registros encontrados [#{jsfDatoGlobal.lista.size()}]" />
                                </f:facet>
                                <h:column >
                                    <f:facet name="header">
                                        <h:outputText value="#" />
                                    </f:facet>
                                    <h:outputText value="#{jsfDatoGlobal.lista.indexOf(item)+1}"/>
                                </h:column>
                                <r:column >
                                    <f:facet name="header">
                                        <h:outputText value="CLAVE" />
                                    </f:facet>
                                    <h:outputText value="#{item.clave}"/>
                                </r:column>
                                <r:column >
                                    <f:facet name="header">
                                        <h:outputText value="VALOR" />
                                    </f:facet>
                                    <h:outputText value="#{item.valor}"/>
                                </r:column>
                                <r:column >
                                    <f:facet name="header">
                                        <h:outputText value="DESCRIPCIÓN" />
                                    </f:facet>
                                    <h:outputText value="#{item.descripcion}"/>
                                </r:column>
                                <r:column >
                                    <f:facet name="header">
                                        <h:outputText value="ESTADO" />
                                    </f:facet>
                                    <h:outputText value="#{item.estado==1?'Activo':'Inactivo'}" styleClass="#{item.estado==1?'textoNegrita':'campo-obligatorio textoNegrita'}"/>
                                </r:column>

                                <r:column>
                                    <f:facet name="header">
                                        <h:outputText value="Acción" />
                                    </f:facet>
                                    <h:commandLink action="#{jsfDatoGlobal.editarAction(item)}" title="Editar">
                                        <h:graphicImage library="images/icons" name="page-edit-icon-24.png" styleClass="pic" />
                                        <f:ajax execute="@this" event="action" render=":panelDatos"/>
                                    </h:commandLink>
                                    <h:commandLink action="#{jsfDatoGlobal.eliminarAction(item)}" title="Eliminar" onclick="if (!confirm('Seguro que desea eliminar el registro?')) {
                                                formLista.reset();
                                                return false;
                                            }">
                                        <h:graphicImage library="images/icons" name="Document-Delete-icon-24.png" styleClass="pic" />
                                        <f:ajax execute="@this" event="action" render="@form :panelDatos"/>
                                    </h:commandLink>
                                </r:column>
                                <f:facet name="footer">
                                    <r:dataScroller for="listaSimple" rendered="#{jsfDatoGlobal.lista.size()>15}" />
                                </f:facet>
                            </r:dataTable>
                        </h:panelGrid>
                        <r:jQuery selector="#listaSimple tr:odd" query="addClass('odd-row')" />
                        <r:jQuery selector="#listaSimple tr:even" query="addClass('even-row')" />
                        <r:jQuery selector="#listaSimple tr" query="mouseover(function(){jQuery(this).addClass('active-row')})"/>
                        <r:jQuery selector="#listaSimple tr" query="mouseout(function(){jQuery(this).removeClass('active-row')})"/>
                    </r:panel>
                </h:form>
            </h:panelGrid>
        </center>
    </ui:define>

</ui:composition>
